<template>
  <div>
        <div id="to-center" class="toCenter">
          <div class="left-box">
               <div class="left-box-top">
                    <div class="item-box">构造函数</div>
                    <div class="item-box">原型对象</div>
                </div>
                <div class="item-box">实例对象</div>
          </div>
        <div class="right-box">
              <h2 id="title">原型链与继承</h2>
            <hr id="hrline">
            <p id="text">
                在ES6提出以前，JavaScript并没有
<el-tooltip placement="top" content="类（Class）是面向对象程序设计实现信息封装的基础。类是一种用户定义的引用数据类型，也称类类型。每个类包含数据说明和一组操作数据或传递消息的函数。类的实例称为对象。">
  <b>“类”</b>
</el-tooltip>的概念，因此，如果JavaScript想实现继承，就需要在两个对象间创建一种
            <b>关联</b>，通过这种关联，一个对象就能够访问另一个对象的属性和方法，达到类似继承的效果。在JavaScript中，有一个
          指向原型对象的指针<el-tooltip placement="top" content="__proto__  属性是一个访问器属性（一个getter函数和一个setter函数）, 暴露了通过它访问的对象的内部[[Prototype]] (一个对象或 null)。">
 <b> __proto__ </b>。
</el-tooltip> 当一个对象要调用一个自身没有的方法时，它就会顺着__proto__ 向上查找，直到查找到最顶层。
            这条被 __proto__ 链接起来的链式关系，就称为<b>原型链</b>
            </p>
        <div id="to-more">点击查看更多></div>
          </div>
    </div>
    </div>
</template>
<script>

import anime from 'animejs'
import Animator from '../../animator/animator'
export default {
name:"PrototyHome",
mounted(){
    document.getElementById("head-nav").scrollIntoView()
   let myAnimation = anime({
  targets: ['.item-box'],
  translateY: '-600px',
    rotate:360,
   easing: 'spring(1, 80, 10, 0)',
  delay: anime.stagger(300, {direction: 'center'})
//   loop: true
    });
     let that=this
  setTimeout(()=>{
          let line=new Animator(500,function(p){
        let ty = 400 * p * (2-p)
        document.getElementById("hrline").style.width=ty+'px';
    })
      line.animate().then(function(res){
            document.getElementById("title").style.transform = 'translateY(-50px)';     
            document.getElementById("title").style.opacity=1;
            document.getElementById("text").style.opacity=1;
            document.getElementById("to-center").addEventListener('click',()=>{
            console.log(that)
                that.$router.push('/Funcation')
            })
        },function(err){
        })
    },1200)
},
methods:{

}
}
</script>

<style lang="less" scoped>
    hr{
        background: #6853da;
        width: 0px;
        height: 3px;
        margin-bottom: 30px;
    }
    .toCenter{
    width: 1300px;
    margin: 0 auto;
    display: flex;
    }
    .item-box{
        width:150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
        background-color: #6853da;
        border-radius:180px;
        color:aliceblue;
        font-weight: 800;
    }
    .left-box-top :nth-child(1){
        width: 210px;
        height:210px;
        line-height: 210px;
        font-size: 24px;
    }
    .left-box-top :nth-child(2){
        width: 100px;
        height:100px;
        line-height: 100px;
        font-size: 16px;
    }
    .left-box{
    position: relative;
    margin-top: 700px;
    width: 500px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-between;
    }
    .left-box-top{
    width: 500px;
    display: flex;
    justify-content:space-around;
    }
    .right-box{
        position: relative;
        background-color: white;
        z-index: 10;
        h2{
            position: relative;
            top:50px;
            transition: 1s;
            margin-bottom: 20px;
             opacity: 0;
        }
        position: relative;
        width: 500px;
        margin-top: 100px;
        left: 200px;
        p{
            font-size: 18px;
            text-indent: 2em;
            line-height: 40px;
            transition: 1s;
            opacity: 0;
        }
        b{
        color:#6853da
        }
    #to-more{
        position: relative;
        top:160px;
        left: -100px;
        cursor:default;
        font-size: 18px;
        color:rgb(226, 222, 222)
        }
    #to-more:hover{
          color:#6853da;
            opacity: 0.8;
    }
    }
</style>